<template>
  <div class="page-container">
    <!-- <el-header>
        <div style="padding: 16px 0">
            <div class="app-logo">
                <svg-icon icon="logo2" height="64px" width="400px" @click="toHome" />
            </div>
        </div>
    </el-header> -->
    <!--<UserHeader />-->
    <div>
      <div class="banner">
        <img src="@/assets/images/banner.png" style="height: 100%;width: 100%;" alt="" />
      </div>
      <!-- <div class="section section-deep">
           <LoginSection />
       </div>-->
      <div class="section section-dark">
        <div style="width: 6.6rem;border: 2px solid #36CDFD;margin:0 auto;" />
        <div class="section-head">
          <p class="main-title bordered-bottom" style="--blank-color: #1e2735; width: 2.46rem; margin: auto">
            全身骨显像临床资源数据库介绍<i class="bar-bottom" /></p>
        </div>
        <!--<div style="width:400px;border: 1px solid #36CDFD;margin:0 auto;"/>-->
        <!--<div style="width:138px;border: 2px solid #36CDFD;margin:0 auto;"/>-->
        <div class="section-text" style="margin-left: 20%;">
          <p class="main-text">&emsp;&emsp;在四川大学华西医院核医学科、生物大数据中心、信息中心、临床研究管理部的共同努力下，完成了这一“核医学影像数据库（Nuclear Imaging
            Archieve）”的建设，该数据库综合大数据管理技术，通过数据抽取、数据脱敏转换等清洗标化流程，纳入了4万余例“真实世界”核医学影像数据，包含各类典型核医学检查特征图像，简要病史、基于随访结果的影像诊断等信息，为基于核医学影像分析的各类科研提供有效数据支撑。该数据库的建设获得了四川大学华西医院1.3.5学科建设项目“核医学精准诊疗一体化学科建设”的支持。
          </p>
        </div>
        <!--<div class="page-content">
          <Carousel type="card" :list="['/src/assets/images/intor/winner1.png']" />
        </div>-->
        <HomeSection />
      </div>
      <div class="section section-aliceblue">
        <div class="list-head">
          <p class="list-title bordered-bottom">病例列表<i class="bar-bottom" /></p>
        </div>
        <div class="bordered-table-head flex flex-between  page-content">
          <p></p>
          <!-- <p>抽样列表</p> -->
          <p @click="showMore" class="section-subtext2 right-point">查看更多</p>
        </div>
        <CaseSection class="page-content" />
      </div>
      <!--<CommonFooter type="default"/>-->
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, reactive } from 'vue'
import UserHeader from './UserHeader.vue';
import CaseSection from './CaseSection.vue';
import HomeSection from './HomeSection.vue';
import LoginSection from './LoginSection.vue';
import CommonFooter from './CommonFooter.vue';
import { useRoute, useRouter } from 'vue-router'
import { useUser } from '@/store/user';
import { ElMessageBox, ElMessage } from 'element-plus';

const router = useRouter()
const route = useRoute()
//登录相关
// const user = useUser(); // 相当于setup方法
let user = JSON.parse(sessionStorage.getItem('userInfo')) ? JSON.parse(sessionStorage.getItem('userInfo')) : {}


//首页前端栏

const defaultActive = () => '/' + (route.path.split('/')[1] || '')
const toHome = () => router.push('/')
const goPage = (path: any) => {
  router.push({ path })
}
/**
 * 判断是否为白底背景
 */
const isWhiteBg = computed(() => {
  for (const m of route.matched) {
    if (m.meta && m.meta.whiteBg) {
      return true
    }
  }
  return false
})

const showMore = () => {
  user = JSON.parse(sessionStorage.getItem('userInfo')) ? JSON.parse(sessionStorage.getItem('userInfo')) : {}
  if (user.nickName) {
    router.push('/case')
  } else {
    ElMessage.error('请登录后查看')
  }
}

// const mounted = () => {
//     console.log(window.innerWidth);
//     var browerWidth = window.innerWidth; //浏览器可视宽度
//     var baseWidth = 1920; //设计稿宽度
//     var zoomValue = browerWidth / baseWidth; //缩放比例计算
//     document.getElementById("mainContainer").style.transform = "scale(" + zoomValue + "," + zoomValue + ")"; //mainContainer为主容器id
//     window.onresize = function () { //窗口尺寸变化时，重新计算和缩放
//       browerWidth = window.innerWidth;
//       zoomValue = browerWidth / baseWidth;
//       document.getElementById("mainContainer").style.transform = "scale(" + zoomValue + "," + zoomValue + ")";
//     }
// }
</script>

<style lang='scss' scoped>
.app-logo {
  cursor: pointer;
  display: flex;
  padding: 0 80px;
  box-sizing: border-box;
}

.banner {
  // height: 919px;
  width: 100%;
  line-height: 0;
  position: relative;
  overflow: hidden;
}

.section {
  .list-head {
    height: 69px;
    margin: var(--custom-size-gap-lg) 0;
    text-align: center;
  }

  .list-title {
    width: 400px;
    font-size: 32px;
    font-weight: 400;
    color: #1A1A1A;
    margin: auto;
    line-height: 40px;
  }

  .main-title {
    font-size: 32px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #36CDFD;
    line-height: 40px;
  }

  .main-text {
    font-size: 18px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 200;
    color: #FFFFFF;
    line-height: 36px;
  }

  .section-head {
    height: 69px;
    margin: var(--custom-size-gap-lg) 0;
    text-align: center;
    // border-bottom: 1px solid #36CDFD;
  }

  .section-text {
    height: 144px;
    width: 1200px;
    margin: var(--custom-size-gap-lg) 0;
    text-align: left;
    display: flex;
  }

  .section-subtext {
    margin: var(--custom-size-gap-sm) 0;
    opacity: 0.6;
  }

  .section-subtext2 {
    cursor: pointer;
    margin: var(--custom-size-gap-sm) 0;
    opacity: 0.6;
  }

  .section-title {
    margin: var(--custom-size-gap-sm) 0;
    font-size: 32px;
    font-weight: 500;
  }

  &.section-deep {
    background-image: url('@/assets/images/banner.png');
    width: 100%;
    background-size: 100%;
    padding: 30px 0;
  }

  &.section-dark {
    background-image: url('@/assets/images/main-bg.png');
    background-size: cover;
    // background-color: var(--custom-fill-dark);
    padding: 30px 0;

    .section-head {
      color: #fff;
    }
  }

  &.section-aliceblue {
    background: #E6E7E9;
    padding: 30px 0;
  }
}

.personal-center {
  width: 1920px;
}

.el-scrollbar {
  > :deep(.el-scrollbar__bar) {
    z-index: 10;
  }
}

.el-main {
  padding: 0;
  height: calc(100vh - 50px);
}

.el-menu.header-menu {
  --el-menu-bg-color: transparent;
  width: 150px;
  display: flex;
  justify-content: space-between;
  border-bottom: none !important;

  .el-menu-item {
    padding: 14px 0;
    border-bottom: none !important;
    background-color: transparent !important;
    line-height: 1;

    .menu-label {
      display: flex;
      justify-content: center;
      min-width: 40px;
      font-size: 14px;
    }

    &.is-active:after {
      content: '';
      display: block;
      height: 2px;
      background-color: currentColor;
      position: absolute;
      left: 0;
      bottom: -1px;
      right: 0;
    }
  }

  .personal-card {
    .personal-card__header {
      background-image: url('@/assets/images/personal-card.png');
      color: #fff;
      display: flex;
      padding: 15px 20px;
      height: 80px;
      box-sizing: border-box;
    }

    .personal-menu-item {
      cursor: pointer;
      padding: 12px 20px;
      box-sizing: border-box;
      display: inline-flex;
      justify-content: space-between;
      width: 100%;
      line-height: 16px;
      margin: 2px 0;
    }

    &:hover {
      color: var(--el-color-primary);
    }

    >span {
      display: inline-flex;
    }
  }
}
</style>